import React from 'react'
import { Input, Button, List } from 'antd';

// 无状态组件
const TodoListUI = (props) => {
  return (
    <div style={{margin: "10px 10px"}}>
      <Input 
        value={props.inputValue} 
        placeholder="Basic usage" 
        style={{width: "300px", marginRight: "10px"}}
        onChange={props.handleChange}
      />
      <Button type="primary" onClick={props.handleAdd}>添加</Button>
    
      <List
        style={{marginTop: "10px", width: "300px"}}
        size="small"
        bordered
        dataSource={props.list}
        renderItem={(item, index) => <List.Item onClick={() => {props.handleDeleteItem(index)}}>{item}</List.Item>}
      />
    </div>
  )
}

// class TodoListUI extends React.Component {
//   render() {
//     return (
//       <div style={{margin: "10px 10px"}}>
//         <Input 
//           value={this.props.inputValue} 
//           placeholder="Basic usage" 
//           style={{width: "300px", marginRight: "10px"}}
//           onChange={this.props.handleChange}
//         />
//         <Button type="primary" onClick={this.props.handleAdd}>添加</Button>
      
//         <List
//           style={{marginTop: "10px", width: "300px"}}
//           size="small"
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item, index) => <List.Item onClick={(index) => {this.props.handleDeleteItem(index)}}>{item}</List.Item>}
//         />
//       </div>
//     )
//   }
// }
export default TodoListUI